入門GUI: 訂正と解説

記述が間違っている、あるいは誤解を生む箇所について解説します。

本文中で何かがおかしい場合、基本的にはサンプルコードを信用してください。

記述の不備にてご不便をおかけして申し訳ございません。

第2章バウンディングボックスことはじめー移動・拡縮・回転

p.37 コードブロックより

Handlers の onMove はこの時点では onMove(dx: Pixel, dy: Pixel) の2つの引数を受け取りますが、これは回転を考慮しない拡大だけを実装する場合です。

回転を考慮したい拡大を見越したい場合は絶対座標も引数に含めましょう。詳しくはサンプルコードの MouseDraggable や TouchDraggable の実装をご覧ください。

p.39 コードブロック内

_onTouchMove で this.handlers.onDragStart(x, y, e) という呼び方をしている箇所も、p.37 と同様のケースで修正が必要です。

p.40〜41 useDrag

useDrag は <rect> だけとは限らないので、ジェネリクスで実装する方が正しいです。

code:ts

function useDrag<E extends SVGElement>(

isTouchDevice: boolean,

handlers: Handlers

) {

const ref = useRef<E | null>(null);

呼び出し側もジェネリクスを使う形に読み替えてください（ p.50 の RotateHandler なども同様）。

code:ts

const ref = useDrag<SVGSVGElement>("ontouchstart" in window, {

p.43 layer/moved の case 内

layer.x = x + dx は layer.positionX = positionX + dx の誤りです（次の行の layer.y も同様）。

p.45 RectLayer

レイヤーとハンドルは同時に拡大や回転をするので、data-layer-id などの属性は <rect> につけるよりも、外側の <svg> につけるほうが後々の拡張性に繋がります（実際にサンプルコードではそちらに修正しています）。

p.47 layer/resized の case 内

layer.width = x + dx は layer.width = width + dx の誤りです（次の行の layer.height も同様）